<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>

</head>
<body>
<button type="button" class="" id="button" onclick="useText()">点击</button>
power:<input type="range" id="points" min="10" max="100" value="50" step="10"/>
<canvas id="iconCanvas">

</canvas>
<div>asdasdasdsadasd</div>

<script>
  (function() {
    var iconCanvasWidth = 300;
    var iconCanvasHeight = 50;
    var color = '#000';
    var text = '梦醒何其彷徨';
    var id = 'iconCanvas';
    var mouseRadius = 10;

    img = document.createElement('canvas');
    img.width = iconCanvasWidth;
    img.height = iconCanvasHeight;
    var imgctx = img.getContext("2d");
    imgctx.textAlign = "center";
    imgctx.textBaseline = "middle";
    imgctx.font = "40px Arial";
    imgctx.fillText(text, img.width / 2, img.height / 2);

    var canvas = document.getElementById(id);
    var ctx = canvas.getContext('2d');
    var img;
    canvas.width = iconCanvasWidth;
    canvas.height = iconCanvasHeight;

    var mouseX = null, mouseY = null;

    var RAF = (function () {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    })();

    window.onmousemove = function (e) {
      if (e.target.id == id) {
        mouseX = e.clientX - e.target.getBoundingClientRect().left;
        mouseY = e.clientY - e.target.getBoundingClientRect().top;
      } else {
        mouseX = null;
        mouseY = null;
      }
    };

    var particleArray = [];
    var animateArray = [];
    var particleSize_x = 1;
    var particleSize_y = 2;
    var canvasHandle = {
      init: function () {
        this._reset();
        this._initImageData();
        this._execAnimate();
      },

      _reset: function () {
        particleArray.length = 0;
        animateArray.length = 0;
        this.ite = 100;
        this.start = 0;
        this.end = this.start + this.ite;
      },

      _initImageData: function () {
        this.imgx = (canvas.width - img.width) / 2;
        this.imgy = (canvas.height - img.height) / 2;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, this.imgx, this.imgy, img.width, img.height);
        var imgData = ctx.getImageData(this.imgx, this.imgy, img.width, img.height);
        for (var x = 0; x < img.width; x += particleSize_x) {
          for (var y = 0; y < img.height; y += particleSize_y) {
            var i = (y * imgData.width + x) * 4;
            if (imgData.data[i + 3] >= 125) {
              var x_random = x + Math.random() * 20,
                vx = -Math.random() * 200 + 400,
                y_random = img.height / 2 - Math.random() * 40 + 20,
                vy;
              if (y_random < this.imgy + img.height / 2) {
                vy = Math.random() * 300;
              } else {
                vy = -Math.random() * 300;
              }
              particleArray.push(
                new Particle(
                  x_random + this.imgx,
                  y_random + this.imgy,
                  x + this.imgx,
                  y + this.imgy,
                  vx,
                  vy,
                  color
                )
              );
              particleArray[particleArray.length - 1].drawSelf();
            }
          }
        }
      },

      _execAnimate: function () {
        var that = this;
        particleArray.sort(function (a, b) {
          return a.ex - b.ex;
        });
        if (!this.isInit) {
          this.isInit = true;
          animate(function (tickTime) {
            if (animateArray.length < particleArray.length) {
              if (that.end > (particleArray.length - 1)) {
                that.end = (particleArray.length - 1)
              }
              animateArray = animateArray.concat(particleArray.slice(that.start, that.end))
              that.start += that.ite;
              that.end += that.ite;
            }
            animateArray.forEach(function (item, index) {
              var c = (typeof item === "object") ? item : window;
              c.update(tickTime);
            })
          })
        }
      }
    }

    function animate(tick) {
      if (typeof tick == "function") {
        var tickTime = 16;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        tick(tickTime);
        RAF(function () {
          animate(tick)
        })
      }
    }

    function Particle(x, y, ex, ey, vx, vy, color) {
      this.x = x;
      this.y = y;
      this.ex = ex;
      this.ey = ey;
      this.vx = vx;
      this.vy = vy;
      this.a = 1500;
      this.color = color;
      this.width = particleSize_x;
      this.height = particleSize_y;
      this.stop = false;
      this.static = false;
      this.maxCheckTimes = 10;
      this.checkLength = 5;
      this.checkTimes = 0;
    }

    var oldColor = "";
    Particle.prototype = {
      constructor: Particle,
      drawSelf: function () {
        if (oldColor != this.color) {
          ctx.fillStyle = this.color;
          oldColor = this.color
        }
        ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
      },

      move: function (tickTime) {
        if (this.stop) {
          this.x = this.ex;
          this.y = this.ey;
        } else {
          tickTime = tickTime / 1000;

          var cx = this.ex - this.x;
          var cy = this.ey - this.y;
          var angle = Math.atan(cy / cx);
          var ax = Math.abs(this.a * Math.cos(angle));
          ax = this.x > this.ex ? -ax : ax

          var ay = Math.abs(this.a * Math.sin(angle));
          ay = this.y > this.ey ? -ay : ay;

          this.vx += ax * tickTime;
          this.vy += ay * tickTime;
          this.vx *= 0.95;
          this.vy *= 0.95;
          this.x += this.vx * tickTime;
          this.y += this.vy * tickTime;

          if (Math.abs(this.x - this.ex) <= this.checkLength && Math.abs(this.y - this.ey) <= this.checkLength) {
            this.checkTimes++;
            if (this.checkTimes >= this.maxCheckTimes) {
              this.stop = true;
            }
          } else {
            this.checkTimes = 0
          }
        }
      },

      update: function (tickTime) {
        this.move(tickTime);
        this.drawSelf();
        this._checkMouse();
      },

      _checkMouse: function () {
        var that = this;
        if (!mouseX) {
          goback();
          return;
        }
        var distance = Math.sqrt(Math.pow(mouseX - this.x, 2) + Math.pow(mouseY - this.y, 2));
        var angle = Math.atan((mouseY - this.y) / (mouseX - this.x));
        if (distance < mouseRadius) {
          this.stop = false;
          this.checkTimes = 0;

          if (!this.recordX) {
            this.recordX = this.ex;
            this.recordY = this.ey;
          }

          this.a = 2000 + 1000 * (1 - distance / mouseRadius);
          var xc = Math.abs((mouseRadius - distance) * Math.cos(angle));
          var yc = Math.abs((mouseRadius - distance) * Math.sin(angle));
          xc = mouseX > this.x ? -xc : xc;
          yc = mouseY > this.y ? -yc : yc;
          this.ex = this.x + xc;
          this.ey = this.y + yc;
        } else {
          goback();
        }

        function goback() {
          if (that.recordX) {
            that.stop = false;
            that.checkTimes = 0;
            that.a = 1500;
            that.ex = that.recordX;
            that.ey = that.recordY;
            that.recordX = null;
            that.recordY = null;
          }
        }
      }
    };
    canvasHandle.init();
  })();
</script>
</body>
</html>